<div class="content">
    <div id="example_title">
        <h1>Add/Remove Items</h1>
        You can add/remove items to the sidebar during the run time. The library will automatically refresh the portion of the sidebar that
        needs rebuilding.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
    <button class="w2ui-btn" onclick="addItems()">Add Items</button>
    <button class="w2ui-btn" onclick="insertItems()">Insert Items</button>
    <button class="w2ui-btn" onclick="removeItem()">Remove Inserted Items</button>
</div>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar } from '__W2UI_PATH__'

let sidebar = new w2sidebar({
    box: '#sidebar',
    name: 'sidebar',
    nodes: [
        { id: 'level-1', text: 'Level 1', expanded: true, group: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'fa fa-star-o' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'fa fa-star-o' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'fa fa-star-o' }
            ]
        }
    ]
})

window.addItems = function() {
    sidebar.add([
        { id: 'new-1', text: 'New Item 1', icon: 'w2ui-icon-check' },
        { id: 'new-2', text: 'New Item 2', icon: 'w2ui-icon-check' },
        { id: 'new-3', text: 'New Item 3', icon: 'w2ui-icon-check' }
    ]);
}

window.insertItems = function() {
    sidebar.insert('level-1-2', null, [
        { id: 'new-4', text: 'New Item 4', icon: 'w2ui-icon-check' },
        { id: 'new-5', text: 'New Item 5', icon: 'w2ui-icon-check' },
        { id: 'new-6', text: 'New Item 6', icon: 'w2ui-icon-check' }
    ])
    sidebar.expand('level-1-2')
}

window.removeItem = function() {
    sidebar.remove('new-1', 'new-2', 'new-3', 'new-4', 'new-5', 'new-6')
}
</script>
